
    
    #cubes {
        transform-style: preserve-3d;
        background-color: transparent;
        position: relative;
        margin-left: -10px;
        top:-20px;
        perspective-origin: 0% 100px;
        perspective: 1000px;
    }
    .wrap {
        width: 25px;
        height: 75px;
        background-color: transparent;
        position: relative;
        transform-style: preserve-3d;
        display: inline-block;
        top: 0px;
        left: 0px;
        transform: rotateX(-20deg) rotateY(-25deg) translateZ(0px);
    }
    .cube {
        width: 25px;
        height: 75px;
        display: block;
        transform-style: preserve-3d;
        perspective-origin: top 100px;
        background-color: transparent;
        position: absolute;
        margin: 0px;
        transition: all 1s linear;
    }
    .cube div {
        height: 100px;
        box-sizing: border-box;
        position: absolute;
        display: block;
        opacity: 1;
    }
    .back {
        transform: translateZ(25px) rotateY(180deg);
        width: 25px;
    }
    .right {
        width: 25px;
        transform: rotateY(-270deg) translateX(-25px) translateZ(0);
        transform-origin: top right;
        background:rgba(39,203,143,0.7);
    }
    .left {
        width: 25px;
        transform: rotateY(270deg) translateX(25px);
        transform-origin: center left;
    }
    .top {
        transform: rotateX(-90deg) translateY(-50px);
        transform-origin: top center;
        width: 25px;
        height: 25px !important;
        background:rgba(39,203,143,0.9)
    }
    .bottom {
        transform: rotateX(90deg) translateY(50px) translateZ(-75px);
        transform-origin: bottom center;
        width: 25px;
        height: 25px !important;
    }
    .front {
        transform: translateZ(50px);
        width: 25px;
        background:rgba(39,203,143,0.4);
    }
    
    .wrap:last-child .cube div {
        
    }
    .back a {
        transform: rotateZ(180deg);
        display: inline-block;
        position: relative;
        margin: 0px auto;
        color: black;
        visibility: hidden;
        text-decoration: none;
    }
    .back:hover a {
        visibility: visible;
    }
    .back a:hover {
        text-shadow: 5px 5px 5px slategrey;
    }
    .levelCir{
        width:25px;
        line-height:25px;
        text-align: center;
        border-radius: 50%;
        background:#0CDE4E;
        position:absolute;
        bottom:0px;
        left:157px;
        font-weight: 500;
        z-index:200
    }
    /* .cube:hover {
        transform: rotateX(180deg);
    } */
    .cityNameClick{
        cursor: pointer;
    }
    .fuyangliziNum{
        width:76px;
        height:40px;
        background:linear-gradient(0deg,rgba(13,131,214,1) 0%,rgba(68,169,190,0) 100%);
        text-align: center;
        cursor: pointer;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        
    }
    .qxzs{
        /* margin-left:5px; */
        width:160px;
        height:150px;
        background:rgba(0,0,0,.5);
        border-radius:4px;
        border:1px soild #ddd;
        text-align: center;
        cursor: pointer;
    }
    .qxzs .qxzsName{
        width:100%;
        cursor:pointer;
        text-align:center;
        height:35px;
        line-height:35px
    }
    .qxzs .qxzsName span{
        pointer-events: auto;color:yellow;font-size:22px;
        /* font-weight: 700; */
    }
    .qxzs .qxzsLXY{
        width:144px;
        height:30px;
        margin-left:7px;
        margin-bottom:0px;
        text-align:center;
        line-height:30px;
        font-size:20px;
    }
    .qxzs .qxzsLXY span{
        font-size:25px;
    }
    .qxzs .sxzs{
        display:flex;
        flex-wrap:wrap;
        padding:5px;
        padding-top: 3px;
    }
    .qxzs .sxzs div{
        float:left;width:70px;height:30px;line-height:30px;font-size:18px;margin:2px
    }
    .qxzs .sxzs div span{
        float:left;font-size:25px;
    }
    .xiaotri{
        width:0px;height:0px;border:10px solid rgba(0,0,0,.5);border-color:rgba(0,0,0,.5);
                                margin:0 auto;
                                border-left-color:transparent;
                                border-right-color:transparent;
                                border-bottom-color:transparent;
    }

    .class1{
        background: #32F3A9;
        content: "hao"
    }
    .class2{
        background: #63B5E6;
        content: "hao"
    }
    .class3{
        background: #E8CE67;
        content: "hao"
    }
    .class4{
        background:transparent;
        content: "hao"
    }
    .class4{
        background: #E8CE67;
        content: "hao"
    }
    .class5{
        background: #63B5E6;
        content: "hao"
    }
    .font1{
        background:yellow
    }
    .font1{
        background:red
    }
    .fuyangCanvas{
        width:76px;
        height:87px;
        position:relative;
        background:linear-gradient(0deg,rgba(13,131,214,1) 0%,rgba(13,131,214,0) 100%);
        border-bottom-left-radius:17px;
        border-bottom-right-radius:17px;
    }
    .fuyanglizi{
        width:76px;
        height:87px;
    }
    .yuanquan{
        width:24px;
        height:24px;
        border-radius: 50%;
        background: #32F3A9;
        overflow: hidden;
        margin:0 auto;
    }
    .yuanquanBlue{
        width:24px;
        height:24px;
        border-radius: 50%;
        background: #2fdefc;
        overflow: hidden;
        margin: 0 auto;
        margin-top:-10px;
    }
    .xiaoyuanquan{
        width:14px;
        height:14px;
        border-radius: 50%;
        background: #fff;
        margin-top:5px;
        margin-left:5px;
    }